<template>
  <div id="app">
    <div class="menu">
      <div
        v-for="(item, index) in menuList"
        :key="index"
        class="item"
        @click="toPage(item.path)"
      >
        {{ item.title }}
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          title: "首页",
          path: "/"
        },
        {
          title: "形状",
          path: "/box"
        },
        {
          title: "模型glb",
          path: "/models"
        },
        {
          title: "3dTiles",
          path: "/3dTiles"
        },
        {
          title: "City",
          path: "/City"
        }
      ]
    }
  },
  methods: {
    toPage(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss">
html, body, #app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  color: #000;
  overflow: hidden;
}

.box {
  height: calc(100vh - 50px);
}

.menu {
  background-color: #000000;
  color: #ffffff;
  height: 50px;
  line-height: 50px;
  display: flex;
}

.item {
  margin: 0 10px;
  cursor: pointer;
}
</style>
